<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Document</title>
    <link rel="stylesheet" href="css/denglu.css" />
    <script src="./js/ajax.js " type="text/javascript" charset="utf-8"></script>
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/index.css" />
    <script src="./js/cookie.js"></script>
  </head>
  <body>
    <div class="header">
      <div class="head1">
        <img src="./images/header1.png" alt="" />
      </div>
      <div class="head2">
        <img src="./images/ico-comm5.png" alt="" />
      </div>
      <div class="head3">
        <input type="text" class="search" placeholder="请输入想要找的宝贝" />
      </div>
      <div class="head4"><a href="denglu.html">立即登录</a></div>
      <div class="head5"><a href="">购物车</a></div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="head.html">首页</a></li>
        <li><a href="page.html">枪模主题站</a></li>
        <li><a href="page.html">服饰时尚</a></li>
        <li><a href="page.html">包类专区</a></li>
        <li><a href="page.html">数码外设</a></li>
        <li><a href="page.html">家居日用</a></li>
        <li><a href="page.html">模型手办</a></li>
      </ul>
    </div>
    <div class="container right-panel-active">
      <!-- 注册 -->
      <div class="container_form container--signup">
        <form action="" class="form" id="form1" method="post">
          <h2 class="form_title">注册</h2>
          <input
            type="text"
            placeholder="用户名"
            class="input"
            value=""
            id="username"
          />
          <input
            type="text"
            placeholder="电话号码"
            class="phone input"
            value=""
          />
          <input type="password" placeholder="密码" class="pwd input" />
          <button class="btn">注册</button>
          <span class="info">提示信息</span>
        </form>
      </div>

      <!-- 登录 -->
      <div class="container_form container--signin">
        <form action="#" class="form" id="form2">
          <h2 class="form_title">登录</h2>
          <input
            type="text"
            placeholder="用户名"
            class="input"
            id="username1"
            value=""
          />
          <input type="password" placeholder="密码" class="input" id="pwd1" />
          <a href="#" class="link">忘记密码？</a>
          <button class="btn" id="login">登录</button>
          记住我 <input type="checkbox" class="remeber" />
        </form>
      </div>

      <!-- 浮层 -->
      <div class="container_overlay">
        <div class="overlay">
          <div class="overlay_panel overlay--left">
            <button class="btn" id="signIn">登录</button>
          </div>
          <div class="overlay_panel overlay--right">
            <button class="btn" id="signUp">注册</button>
          </div>
        </div>
      </div>
    </div>

    <!-- partial -->

    <script>
      let usernameEle = document.querySelector("#username");
      // let pwdEle = document.querySelector(".pwd");
      let phoneEle = document.querySelector(".phone");
      let btnEle = document.querySelector(".btn");
      let pwdEle = document.querySelector(".pwd");
      let infoEle = document.querySelector(".info");
      usernameEle.onblur = function () {
        let name = usernameEle.value;
        let reg = /^[\u4e00-\u9fa5]{2,4}$/;
        if (reg.test(name)) {
          infoEle.innerHTML = "名字符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "名字不符合规则";
          infoEle.style.color = "red";
          alert("名字不符合规则");
        }
      };
      phoneEle.onblur = function () {
        var phone = phoneEle.value;
        var reg = /^1[3-9]\d{9}$/;
        if (reg.test(phone)) {
          infoEle.innerHTML = "手机号符合规则";
          infoEle.style.color = "green";
        } else {
          infoEle.innerHTML = "手机号不符合规则";
          infoEle.style.color = "red";
          alert("手机号不符合规则");
        }
      };
      pwdEle.onblur = function () {
        var val = this.value;
        if (val.length > 8) {
          var reg1 = /(^\d+$)|(^[a-zA-Z]+$)/;
          if (reg1.test(val)) {
            infoEle.innerHTML = "密码强度低";
            infoEle.style.color = "green";
          } else {
            var reg2 = /\d/; // 匹配数字
            var reg3 = /[a-zA-Z]/; // 匹配字母
            var reg4 = /[A-Z]/;
            var reg5 = /_/;
            if (
              reg2.test(val) &&
              reg3.test(val) &&
              reg4.test(val) &&
              reg5.test(val)
            ) {
              infoEle.innerHTML = "密码强度强";
              infoEle.style.color = "green";
            } else {
              if (reg2.test(val) && reg3.test(val)) {
                infoEle.innerHTML = "密码强度中";
                infoEle.style.color = "green";
              }
            }
          }
        } else {
          infoEle.innerHTML = "密码必须大于8位";
          infoEle.style.color = "red";
          alert("密码不符合规则");
        }
      };

      btnEle.onclick = function () {
        let containerEle = document.querySelector(".container_form");
        let username = usernameEle.value;
        let pwd = pwdEle.value;
        let phone = phoneEle.value;
        // console.log(username);
        // console.log(pwd);
        // console.log(phone);
        ajax({
          url: "denglu.php",
          method: "post",
          data: {
            username,
            pwd,
            phone,
          },
          dataType: "json",
          success(res) {
            console.log(res);
            if (res.status == 1) {
              // containerEle.innerHTML = "";
            }
          },
        });
      };
      let loginEle = document.querySelector("#login");
      let remeberEle = document.querySelector(".remeber");
      let username2 = document.querySelector("#username1");
      let pwd2 = document.querySelector("#pwd1");
      loginEle.onclick = function () {
        let username1 = username2.value;
        let pwd1 = pwd2.value;
        ajax({
          url: "checkd.php",
          method: "post",
          data: {
            username1,
            pwd1,
          },
          dataType: "json",
        }).then((res) => {
          if (res.status == 1) {
            console.log(res);
            document.cookie = "username=" + res.data.username1;
            document.cookie = "uid=" + res.data.id;
            if (remeberEle.checked) {
              setCookie("username", res.data.username1, 3600 * 24 * 7);
              setCookie("uid", res.data.id, 3600 * 24 * 7);
            }
            window.location.href = "./page.html";
          }
        });
      };

      // 登录
      const signInBtn = document.getElementById("signIn");
      const signUpBtn = document.getElementById("signUp");
      const firstForm = document.getElementById("form1");
      const secondForm = document.getElementById("form2");
      const container = document.querySelector(".container");

      signInBtn.addEventListener("click", () => {
        container.classList.remove("right-panel-active");
      });

      signUpBtn.addEventListener("click", () => {
        container.classList.add("right-panel-active");
      });

      firstForm.addEventListener("submit", (e) => e.preventDefault());
      secondForm.addEventListener("submit", (e) => e.preventDefault());
    </script>
  </body>
</html>
